<template>
  <div class="channel-container">
      <van-cell title="我的频道" >
        <template #default>
          <van-button size="mini" round type="danger" plain class="edit-btn" @click="isEdit=!isEdit">
            {{isEdit?'完成':'编辑'}}
          </van-button>
        </template>
      </van-cell>

      <van-grid :gutter="6">
        <van-grid-item  @click="clickFn(item,index)" :class="{active:activeIndex === index}" v-for="(item,index) in channels" :key="item.id"   :text="item.name" >
          <template #icon>
            <van-icon name="clear" v-show="isEdit && !fixedChannels.includes(index)" />
          </template>
        </van-grid-item>
      </van-grid>

      <van-cell title="频道推荐"></van-cell>

      <van-grid :gutter="6">
        <van-grid-item @click="addChannel(item)" v-for="item in recommendChannels" :key="item.id" icon="plus" :text="item.name" />
      </van-grid>
  </div>
</template>
<script>
// 计算属性：allChannels做一个filter过滤
// filter
import { getAllChannels, addChannel, deleteUserChannel } from '@/api/channel'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage'
export default {
  name: 'ChannelEdit',
  created () {
    this.getList()
  },
  props: {
    channels: { // 我的频道的数据
      type: Array,
      required: true
    },
    activeIndex: {
      type: Number,
      requred: true
    }
  },
  data () {
    return {
      allChannels: [],
      isEdit: false, // 当前状态 是不是在编辑中
      fixedChannels: [0]// 只要在这个数组中，这个频道就不能被删除
    }
  },
  computed: {
    recommendChannels () {
      // filter 过滤
      // some 只要有一个满足就返回true

      // 对this.allChannels数组进行过滤，找到所有的不在this.channels这个数组的元素项，组成一个新的数组
      return this.allChannels.filter(item => !this.channels.some(item1 => item.id === item1.id))
    },
    ...mapState(['user'])
  },
  methods: {
    async getList () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels// 所有的频道数据
      } catch (err) {
        this.$toast.fail('请求所有频道失败')
      }
    },
    async addChannel (channel) {
      this.channels.push(channel)

      if (this.user) { // 登录状态
        // console.log('登录')
        try {
          await addChannel({
            id: channel.id,
            seq: this.channels.length
          })
          this.$toast.fail('添加频道成功')
        } catch (err) {
          this.$toast.fail('添加频道失败')
        }
      } else { // 未登录
        // 如果当前没有登录，我们就把最新的频道数据同步到本地存储当中
        // console.log('未登录')
        setItem('TOUTIAO_CHANNELS', this.channels)
      }
    },
    clickFn (channel, index) {
      if (this.isEdit) { // 删除
        // 编辑
        // console.log('当前在做编辑')
        if (this.fixedChannels.includes(channel.id)) return // 如果点击的是不能删除的，直接返回
        if (index <= this.activeIndex) { // 如果删除的是前面的，我们就要告诉父组件当前激活的就是当前索引值-1
          // 1 2 3 4
          // 索引换了元素
          // 传的是true显示 false隐藏
          this.$emit('toggle-event', this.activeIndex - 1, true)
        }
        this.channels.splice(index, 1)

        // 把删除之后最新的持久化
        this.deleteChannel(channel.id)
      } else {
        // 切换 子向父传值 事件
        // this.activeIndex = index 这样写是错的，违反了单 向数据流
        // console.log('当前在做切换')
        // toggle-event是自定义事件的名字
        // index是当前要切换的索引
        this.$emit('toggle-event', index, false)
      }
    },
    // 删除持久化
    async deleteChannel (id) {
      if (this.user) { // 登录状态
        try {
          await deleteUserChannel(id)
        } catch (err) {
          this.$toast.fail('删除失败')
        }
      } else { // 未登录
        setItem('TOUTIAO_CHANNELS', this.channels)
      }
    }
  }
}

// 我们刚才修改只是在内存中做了修改，我们还需要把它同步到硬盘，我们把这个过程叫持久化
// 如果登录了，持久化在数据库 接口 api
// 如果没有登录，持久化在本地存储 localStorage
</script>
<style scoped lang="less">
.channel-container{
  padding:85px 0;
  .van-cell__title{
    color:#333;
    font-size:32px;
  }
  .edit-btn{
    width: 104px;
    height: 48px;
    color: #f85959;
  }
}

/deep/ .van-grid-item__content{
  white-space: nowrap;
  .van-icon-clear{
    color:#e4e4e4;
    position: absolute;
    right:-24px;
    top:-24px;
    font-size:36px;
  }
  width: 160px;
  height: 86px;
  display: flex;
  // 改变书写方向 古代
  flex-direction: row;
  .van-grid-item__text{
    font-size: 28px;
    margin-top:0;
  }
  .van-icon-plus{
    font-size:24px;
  }

}
.active /deep/  .van-grid-item__text{
  color:red;
}
/deep/ .van-grid-item__icon-wrapper{
  // position: unset;
  position: static;
}
</style>
